<template>
	<view class="history-data-wrap full box relative p-safe flex column">
		<view class="filter-container w-100">
			<view class="label">
				<text>月份</text>
			</view>
			<view class="value">
				<picker @change="pickerChange" mode="date" fields="month">
					<text>{{ currentDate }}</text>
				</picker>
			</view>
		</view>
		<view class="relative flex-1 box w-100">
			<view class="absolute inset">
				<scroll-view class="full" scroll-y>
					<view class="data-board-item second">
						<view class="header">
							<view class="header-title">
								<text>数据统计-订单</text>
							</view>
						</view>
						<view class="data-list-line">
							<view class="data-line" style="--flex:1">
								<view class="data-item">
									<view class="data-target">
										<text class="data-value">{{ historyOrder.chashi_order_num_wx || 0 }}</text>
										<text class="data-label">微信订单数</text>
									</view>
								</view>
								<view class="data-item">
									<view class="data-target">
										<text class="data-value">{{ historyOrder.chashi_order_num_douyin || 0 }}</text>
										<text class="data-label">抖音订单数</text>
									</view>
								</view>
							</view>
							<view class="data-line" style="--flex:2">
								<view class="data-item">
									<view class="data-target">
										<text class="data-value">{{ historyOrder.chashi_order_num_yue || 0 }}</text>
										<text class="data-label">余额订单数</text>
									</view>
								</view>
								<view class="data-item">
									<view class="data-target">
										<text class="data-value">{{ historyOrder.xudan_order_num || 0 }}</text>
										<text class="data-label">续单订单数</text>
									</view>
								</view>
							</view>
							<view class="data-line" style="--flex:2">
								<view class="data-item">
									<view class="data-target">
										<text class="data-value">{{ historyOrder.chashi_order_num_meituan || 0 }}</text>
										<text class="data-label">美团订单数</text>
									</view>
								</view>
								<view class="data-item">
									<view class="data-target">
										<text class="data-value">{{ historyOrder.chongzhi_num || 0 }}</text>
										<text class="data-label">充值订单数</text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="data-board-item second">
						<view class="header">
							<view class="header-title">
								<text>数据统计-收入</text>
							</view>
						</view>
						<view class="data-list-line">
							<view class="data-line" style="--flex:1">
								<view class="data-item">
									<view class="data-target">
										<text class="data-value">{{ historyMoney.chashi_order_price || 0 }}</text>
										<text class="data-label">茶室-总流水</text>
									</view>
								</view>
								<view class="data-item">
									<view class="data-target">
										<text class="data-value">{{ historyMoney.weixin_pay_price || 0 }}</text>
										<text class="data-label">茶室-微信收入</text>
									</view>
								</view>
							</view>
							<view class="data-line" style="--flex:1">
								<view class="data-item">
									<view class="data-target">
										<text
											class="data-value">{{ historyMoney.chashi_order_price_weixin || 0 }}</text>
										<text class="data-label">包间-微信收入</text>
									</view>
								</view>
								<view class="data-item">
									<view class="data-target">
										<text
											class="data-value">{{ historyMoney.chashi_order_price_douyin || 0 }}</text>
										<text class="data-label">抖音收入</text>
									</view>
								</view>
							</view>
							<view class="data-line" style="--flex:2">
								<view class="data-item">
									<view class="data-target">
										<text class="data-value">{{ historyMoney.chashi_order_price_yue || 0 }}</text>
										<text class="data-label">余额收入</text>
									</view>
								</view>
								<view class="data-item">
									<view class="data-target">
										<text class="data-value">{{ historyMoney.xudan_order_price || 0 }}</text>
										<text class="data-label">续单总收入</text>
									</view>
								</view>
							</view>
							<view class="data-line" style="--flex:2">
								<view class="data-item">
									<view class="data-target">
										<text class="data-value">{{ historyMoney.xudan_order_price_wx || 0 }}</text>
										<text class="data-label">续单微信收入</text>
									</view>
								</view>
								<view class="data-item">
									<view class="data-target">
										<text class="data-value">{{ historyMoney.xudan_order_price_yue || 0 }}</text>
										<text class="data-label">续单余额收入</text>
									</view>
								</view>
							</view>
							<view class="data-line" style="--flex:2">
								<view class="data-item">
									<view class="data-target">
										<text
											class="data-value">{{ historyMoney.chashi_order_price_meituan || 0 }}</text>
										<text class="data-label">美团收入</text>
									</view>
								</view>
								<view class="data-item">
									<view class="data-target">
										<text class="data-value">{{ historyMoney.chongzhi_price || 0 }}</text>
										<text class="data-label">充值总收入</text>
									</view>
								</view>
							</view>

						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		onShow() {
			if (!this.token.length) {
				return this.$toast({ title: '请先登录', time: 2000 }, () => {
					uni.reLaunch({
						url: '/pages/public/login'
					})
				})
			}
			this.initData()
		},
		computed: {
			...mapGetters(['token', 'activeStore', 'userInfo']),
		},
		methods: {
			pickerChange(ev) {
				const { value } = ev.detail
				this.currentDate = value
				this.initData(true)
			},
			patchZero(value) {
				return ('0' + value).slice(-2)
			},
			async initData(showToast = false) {
				uni.showLoading({
					title: '正在获取数据',
					mask: true
				})
				if (!this.currentDate) {
					const date = new Date()
					const [year, month] = [date.getFullYear(), date.getMonth() + 1]
					this.currentDate = `${year}-${this.patchZero(month)}`
				}
				const { mobile } = this.userInfo
				const { activeStore } = this
				const resp = await this.https("/shujutongji/yuedutongji", {
					store_id: activeStore.id,
					mobile,
					date: this.currentDate
				})
				const { code, data, msg } = resp
				if (code !== 1) {
					uni.hideLoading()
					return this.$toast({ title: msg })
				}
				for (let key in data) {
					const value = data[key]
					data[key] = value.toFixed(2)
				}
				const {
					chashi_order_num_wx, // 微信订单数
					chashi_order_num_yue, // 余额订单数
					chashi_order_num_meituan, // 美团订单数
					chashi_order_num_douyin, // 抖音订单数
					shipin_order_num, // 食品订单数
					xudan_order_num, // 续单订单数
					chongzhi_num, // 充值订单数
					chayishi_num, // 茶艺师订单数
					chashi_order_price_weixin, // 微信总收入
					chashi_order_price_yue, // 余额总收入
					chashi_order_price_meituan, // 美团总收入
					chashi_order_price_douyin, // 抖音总收入
					shipin_order_price, // 食品总收入
					xudan_order_price, // 续单总收入
					xudan_order_price_wx, // 续单微信收入
					xudan_order_price_yue, // 续单余额收入
					chongzhi_price, // 充值总收入
					chayishi_price, // 茶艺师总收入
					chashi_order_price, // 茶室总流水
					weixin_pay_price, //微信总收入
				} = data
				const orderData = {
					chashi_order_num_wx,
					chashi_order_num_yue,
					chashi_order_num_meituan,
					chashi_order_num_douyin,
					shipin_order_num,
					xudan_order_num,
					chongzhi_num,
					chayishi_num
				}
				const moneyData = {
					chashi_order_price_weixin,
					chashi_order_price_yue,
					chashi_order_price_meituan,
					chashi_order_price_douyin,
					shipin_order_price,
					xudan_order_price,
					chongzhi_price,
					chayishi_price,
					xudan_order_price_wx,
					xudan_order_price_yue,
					chashi_order_price,
					weixin_pay_price
				}
				this.historyOrder = orderData
				this.historyMoney = moneyData
				uni.hideLoading()
				if (showToast) {
					this.$toast({ title: '获取成功' })
				}
			},
		},
		data() {
			return {
				historyOrder: {},
				historyMoney: {},
				currentDate: '',
			};
		},
	}
</script>

<style lang="scss" scoped>
	.history-data-wrap {
		position: relative;
		background-color: #F7F8FA;
		padding: 16rpx 32rpx;

		.filter-container {
			background-color: #FFF;
			border-radius: 8rpx;
			overflow: hidden;
			padding: 16rpx 24rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.data-board-item {
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			position: relative;
			box-sizing: border-box;
			padding: 32rpx;
			overflow: hidden;

			&.second {
				margin-top: 16rpx;
			}

			.data-list-line {
				display: grid;
				grid-template-columns: repeat(1, 1fr);
				margin-top: 32rpx;
				position: relative;

				&::after {
					content: "";
					display: block;
					position: absolute;
					left: 50%;
					top: 0;
					bottom: 0;
					transform: translateX(-50%);
					width: 1px;
					height: 100%;
					background-color: #EEEEEE;
				}

				.data-line {
					flex: 1;
					display: flex;
					justify-content: center;
					margin-bottom: 32rpx;

					&:last-child {
						margin-bottom: 0;
					}


					.data-item {
						display: flex;
						flex-flow: column;
						align-items: center;
						flex: 1;
						white-space: nowrap;

						&:first-child {
							margin-right: 66rpx;
						}

						.data-target {
							width: auto;
							display: flex;
							flex-flow: column;
							align-items: center;
						}


						&:last-child {
							margin-bottom: 0;
						}

						.data-label {
							height: 40rpx;
							font-size: 24rpx;
							color: rgba(0, 0, 0, 0.6);
							line-height: 40rpx;
							margin-top: 8rpx;
						}

						.data-value {
							height: 48rpx;
							font-size: 40rpx;
							font-weight: bold;
							color: rgba(0, 0, 0, 0.9);
							line-height: 48rpx;
						}
					}
				}
			}

			.data-list {
				display: flex;
				flex-flow: row nowrap;
				margin-top: 32rpx;

				.data-line {
					flex: 1;
					display: flex;
					flex-flow: column;
					border-right: 1px solid #EEEEEE;

					// &:first-child {
					// 	.data-item {
					// 		align-items: flex-start;
					// 	}
					// }

					// &:last-child {
					// 	.data-item {
					// 		align-items: flex-end;
					// 	}
					// }

					.data-item {
						display: flex;
						flex-flow: column;
						margin-bottom: 32rpx;
						align-items: center;



						.data-target {
							width: auto;
							display: flex;
							flex-flow: column;
							align-items: center;
						}


						&:last-child {
							margin-bottom: 0;
						}

						.data-label {
							height: 40rpx;
							font-size: 24rpx;
							color: rgba(0, 0, 0, 0.6);
							line-height: 40rpx;
							margin-top: 12rpx;
							font-weight: bold;
						}

						.data-value {
							height: 48rpx;
							font-size: 40rpx;
							font-weight: bold;
							color: rgba(0, 0, 0, 0.9);
							line-height: 48rpx;
						}
					}

					&:last-child {
						border-right-color: transparent;
					}
				}
			}

			.header {
				display: flex;
				justify-content: space-between;

				.date-select-wrap {
					display: flex;
					align-items: center;
					padding: 4rpx 16rpx;
					box-sizing: border-box;
					position: relative;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					border: 2rpx solid rgba(0, 0, 0, 0.6);
					background-color: #FFF;
					white-space: nowrap;


					.date-value {
						width: 140rpx;
						height: 40rpx;
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.6);
						line-height: 40rpx;
					}

					.arrow-down {
						width: 14rpx;
						height: 10rpx;
						margin-left: 12rpx;
					}
				}

				.header-title {
					height: 48rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.9);
					line-height: 48rpx;
				}
			}
		}
	}
</style>